﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BayGUI</title>
    <link href="../../jquery-easyui-theme/default/easyui.css" rel="stylesheet" />
    <link href="../../jquery-easyui-theme/icon.css" rel="stylesheet" />
    <link href="../../icons/icon-all.css" rel="stylesheet" />

    <script src="../../jquery/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript" ></script>
    <script src="../../jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript" ></script>
    
    <script src="../../jquery.jdirk.js" type="text/javascript" ></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.js" type="text/javascript" ></script>

    <script src="../../jeasyui-extensions/jeasyui.extensions.menu.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.panel.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.window.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.dialog.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.tabs.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.datagrid.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jquery-easyui-toolbar/jquery.toolbar.js" type="text/javascript"></script>

    <script src="jeasyui.baygui.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var bays = $.baygui.init({
                boxesGrid: "#dg",
                boxesUrl: "boxes-data.json",
                boxesMethod: "get",
                boxesColumns: [[
                    { field: "id", title: "ID", width: 60, hidden: true },
                    { field: "boxNo", title: "箱号", width: 80 },
                    {
                        field: "boxSpec", title: "箱型", width: 45, formatter: function (val, row, index) {
                            return "<span style=\"" + (row.boxSpec == "40" ? "font-weight: bold; " : "") + "color: green;\">" + row.boxSpec + "</span>" +
                                row.boxType + "<span style=\"color: red;\">" + row.boxState + "</span>";
                        }
                    },
                    { field: "boxWeight", title: "箱重", width: 45 },
                    { field: "fromPort", title: "始发港", width: 50, },
                    { field: "toPort", title: "目的港", width: 50 },
                    { field: "bayCellNo", title: "贝位号", width: 50 }
                ]],
                baysContainer: "#baysContainer",
                baysUrl: "bays-data.json",
                baysMethod: "get",
                bayCellBoard: "#currentSelected",
                saveUrl: "./bayguiSave.do",
                floating: $("#floating")[0].checked,
                bayCellTooltip: true,
                bayRowDnd: true,
                onSaveError: $.easyui.ajaxError()
            });

            $("#btnSetBayCell").click(function () {
                var row = bays.boxesGrid.datagrid("getSelected");
                if (!row) { return $.messager.show("请先在左侧表格中选定一行数据"); }
                var cellData = bays.getCell();
                if (!cellData || !cellData.bayCellNo) { return $.messager.show("请先选中一个贝位图单元格！"); }
                bays.setCell(cellData.bayCellNo, row.boxNo);
            });

            //$("#btnOpenFilter").click(function () { bays.boxesGrid.datagrid("setColumnFilter", bays.columnFilter); });

            //$("#btnCloseFilter").click(function () { bays.boxesGrid.datagrid("setColumnFilter"); });


            $("#floating").change(function () { bays.floating = this.checked; });

            $("#crushCasc").change(function () { bays.crushCasc = this.checked; });

            var searchType = $("#searchType"), searchVal = $("#searchVal");
            $("#search").click(function () {
                var type = searchType.combobox("getValue"), val = searchVal.val();
                if (type == "0") {
                    bays.jumpCell(val);
                } else {
                    var rows = bays.boxesGrid.datagrid("getRows"), boxes = $.array.filter(rows, function (item) { return item.boxNo.indexOf(val) > -1; });
                    if (boxes.length) {
                        var list = $.array.filter(boxes, function (item) { return item.bayCellNo ? true : false; });
                        if (list.length) {
                            bays.jumpCell(list[0].bayCellNo);
                        } else {
                            $.messager.show("找到了编号符合条件的箱，但是找到的所有箱都未设置贝位号");
                        }
                    } else {
                        $.messager.show("没有找到编号符合条件的箱");
                    }
                }
            });

            $("#resetCell").click(function () {
                var cell = bays.getCell();
                if (cell) {
                    bays.resetCell();
                } else {
                    $.messager.show("请先选择贝位单元格");
                }
            });

            $("#resetBay").click(function () { bays.resetBay(); });

            $("#resetAll").click(function () {
                $.easyui.loading({ msg: "正在重置，请稍等..." });
                $.util.exec(function () { bays.resetAll(); $.easyui.loaded(); }, 100);
            });

            $("#clearCell").click(function () {
                var cell = bays.getCell();
                if (cell) {
                    bays.clearCell();
                } else {
                    $.messager.show("请先选择贝位单元格");
                }
            });

            $("#clearBay").click(function () { bays.clearBay(); });

            $("#clearAll").click(function () {
                $.easyui.loading({ msg: "正在清除，请稍等..." });
                $.util.exec(function () { bays.clearAll(); $.easyui.loaded(); }, 100);
            });

            $("#btnSave").click(function () { bays.save(); });


            //$.get("boxes-data.json", function (data) {
            //    var tt = $("#test");
            //    $.each(data, function (index, box) {
            //        tt.append($.string.format("<tr>" +
            //            "<td class='boxNo'>{0}</td>" +
            //            "<td class='boxSpec'>{1}</td>" +
            //            "<td class='boxWeight'>{2}</td>" +
            //            "<td class='fromPort'>{3}</td>" +
            //            "<td class='toPort'>{4}</td>" +
            //            "<td class='bayCellNo'>{5}</td>" +
            //            "</tr>",
            //            box.boxNo, box.boxSpec, box.boxWeight, box.fromPort, box.toPort, box.bayCellNo));
            //    });
            //    tt.find("tbody tr").draggable({
            //        disabled: false, revert: true, cursor: "pointer", deltaX: 5, deltaY: 5,
            //        proxy: function (source) {
            //            var tr = $(source).clone(), table = $("<table></table>").append(tr);
            //            return $("<div></div>").append(table).appendTo("body").hide();
            //        },
            //        onBeforeDrag: function (e) {
            //            return e.which == 1;
            //        },
            //        onDrag: function (e) {
            //            var x = e.pageX - e.data.startX, y = e.pageY - e.data.startY;
            //            if ((Math.abs(x) + Math.abs(y)) > 10) { $(this).draggable("proxy").show(); }
            //        }
            //    });
            //}, "json");
        });
    </script>
    <style type="text/css">
        body { padding: 0px; margin: 0px; }
        #baysPanel { border-bottom-width: 1px; }

        #test { border-width: 1px; border-style: solid; border-color: black; }
        #test tr { height: 25px; }
        #test th, #test td { padding: 2px 5px 2px 5px; text-align: center; border-width: 0px 1px 1px 0px; border-style: solid; border-color: black; }
        #test tr th:last-child, #test tr td:last-child { border-right: 1px; }
        #test td.boxNo { width: 80px; }
        #test td.boxSpec { width: 40px; }
        #test td.boxWeight { width: 40px; }
        #test td.fromPort { width: 50px; }
        #test td.toPort { width: 50px; }
        #test td.bayCellNo { width: 60px; }
    </style>

</head>
<body>
    <div class="easyui-layout" data-options="fit: true">

        <!--<div data-options="region: 'east', title: '测试表格', split: false, minWidth: 300, maxWidth: 600" style="width: 430px;">
            <table id="test" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>boxNo</th>
                        <th>boxSpec</th>
                        <th>boxWeight</th>
                        <th>fromPort</th>
                        <th>toPort</th>
                        <th>bayCellNo</th>
                    </tr>
                </thead>
            </table>
        </div>-->


        <div data-options="region: 'west', title: '待选数据列表', split: false, minWidth: 300, maxWidth: 600" style="width: 430px;">
            <table id="dg" data-options="border: false, fit: true, rownumbers: true, toolbar: '#tt'"></table>
            <div id="tt" class="easyui-toolbar">
                <a id="btnSetBayCell" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-exchange'">设置贝位</a>
                <span style="margin-left: 20px;">右键点击列名亦可进行过滤操作</span>
                <!--<a id="btnOpenFilter" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-application-get'">打开过滤器</a>
                <a id="btnCloseFilter" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-application-put'">关闭过滤器</a>-->
            </div>
        </div>
        
        <div data-options="region: 'center', title: '贝位图'">
            <div class="easyui-layout" data-options="fit: true" >
                <div id="baysPanel" data-options="region: 'north', border: false" style="height: 126px;">
                    <div class="easyui-toolbar">
                        <span>查找方式：</span>
                        <select id="searchType" class="easyui-combobox" data-options="width: 60, editable: false, panelHeight: 60">
                            <option value="0">贝位号</option>
                            <option value="1">箱号</option>
                        </select>
                        <input id="searchVal" type="text" style="width: 100px;" />
                        <a id="search" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-zoom'">定位查找</a>
                        <label style="margin-left: 68px;">
                            <input id="floating" type="checkbox" checked="checked" />
                            <span>架空配</span>
                        </label>
                        <label style="margin-left: 40px;">
                            <input id="crushCasc" type="checkbox" />
                            <span>20'箱架40'箱上</span>
                        </label>
                    </div>
                    <div class="easyui-toolbar">
                        <a id="resetCell" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-showreel'">重置当前贝位单元格</a>
                        <a id="resetBay" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-settings'">重置所选页贝位</a>
                        <a id="resetAll" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-config'">重置所有贝位</a>
                        <a id="clearCell" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-cancel'" style="margin-left: 17px;">清除所选贝位单元格</a>
                        <a id="clearBay" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-cross'">清除所选页贝位</a>
                        <a id="clearAll" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-busy'">清除所有贝位</a>
                    </div>
                    <div class="easyui-toolbar">
                        <span>当前选中的贝位单元格：</span>
                        <span id="currentSelected"></span>
                    </div>
                    <div class="easyui-toolbar">
                        <a id="btnSave" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-save'">保存所有数据</a>
                        <span>该按钮点击后会报错 404，因为此 BayGUI 组件的 saveUrl 属性所表示的 url 服务端地址实际上无效，此处仅模拟点击效果。</span>
                        <a href="API 说明.txt" target="_blank">查看 API 说明</a>
                    </div>
                </div>
                <div data-options="region: 'center', border: false" >
                    <div id="baysContainer" data-options="fit: true, border: false"></div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
